<div th:fragment="html">
    <div id="userManagerDiv">
        <table class="inputTable ">
            <tr>
                <td width="25%" align="right">
                    <span data-toggle="tooltip" data-placement="top">用户名称:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="userMap.user.username">
                </td>
                <td width="4%"></td>
                <td width="6%" align="right">
                    <span data-toggle="tooltip" data-placement="top">邮箱地址:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="userMap.user.emailadd">
                </td>
                <td width="25%"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
                    <button type="button" class="btn btn-success" @click="queryUser(1)">查询</button>
                </td>
                <td></td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addUserMod">新增
                    </button>
                </td>
                <td></td>
            </tr>
        </table>

        <table class="table table-striped table-bordered table-condensed">
            <thead>
            <th>用户ID</th>
            <th>用户名称</th>
            <th>邮箱地址</th>
            <th>地址</th>
            <th>创建日期</th>
            <th>操作</th>
            </thead>
            <tbody>
            <tr v-for="bean in users">
                <td>{{bean.id}}</td>
                <td>{{bean.username}}</td>
                <td>{{bean.emailadd}}</td>
                <td>{{bean.address}}</td>
                <td>{{ bean.createDate | formatDateFilter }}</td>
                <td>
                    <button type="button" class="btn btn-success" @click="editUserMod(bean.id)">修改</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div style="text-align:center;">
            <div th:replace="include/page::html"></div>
        </div>

        <!--        新增-->
        <div class="modal fade" id="addUserMod" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 720px;">
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title">新增用户</h4>
                    </div>

                    <div>
                        <table class="inputTable">
                            <tr>
                                <td align="right" width="15%">用户ID:</td>
                                <td width="35%">
                                    <input type="text" class="form-control" title="系统自动生成"  disabled>
                                </td>
                                <td align="right" width="15%">用户名称:</td>
                                <td width="35%"><input type="text" class="form-control" v-model="addUser.username">
                                </td>
                            </tr>
                            <tr>
                                <td align="right">地址:</td>
                                <td><input type="text" class="form-control" v-model="addUser.address"></td>
                                <td align="right">邮箱地址:</td>
                                <td><input type="text" class="form-control" v-model="addUser.emailadd"></td>
                            </tr>
                            <tr>
                                <td align="right">密码:</td>
                                <td>
                                    <input type="password" class="form-control" v-model="addUser.password">
                                </td>
                            </tr>

<!--                            <tr></tr>-->
<!--                            <tr>-->
<!--                                <td align="right">拥有角色:</td>-->
<!--                            </tr>-->
<!--                            <tr v-for="bean in roles">-->
<!--                                <td></td>-->
<!--                                <td>-->
<!--                                    <input type="checkbox" :id="bean.id" :value="bean.id" v-model="addRoles">-->
<!--                                    <label :for="bean.id">{{bean.rolename}}</label>-->
<!--                                </td>-->
<!--                            </tr>-->

                        </table>
                    </div>

                    <div class="modal-footer" style="text-align:center;">
                        <button class="btn btn-primary" @click="addSysUser" type="button">新增</button>
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!--        修改-->
        <div class="modal fade" id="editUserMod" data-backdrop="static" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 720px;">>
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title">修改用户</h4>
                    </div>

                    <div>
                        <input type="text" class="form-control" v-model="editUser.id" style="display:none;">
                        <table class="inputTable">
                            <tr>
                                <td align="right" width="15%">用户ID:</td>
                                <td width="35%">
                                    <input type="text" class="form-control" v-model="editUser.id" disabled>
                                </td>
                                <td align="right" width="15%">用户名称:</td>
                                <td width="35%"><input type="text" class="form-control" v-model="editUser.username">
                                </td>
                            </tr>
                            <tr>
                                <td align="right">地址:</td>
                                <td><input type="text" class="form-control" v-model="editUser.address"></td>
                                <td align="right">邮箱地址:</td>
                                <td><input type="text" class="form-control" v-model="editUser.emailadd"></td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span data-toggle="tooltip" data-placement="top" title="为空时不修改密码，需修改请录入新密码">
                                        密码:<span class="glyphicon glyphicon-question-sign" > </span>
                                    </span>
                                </td>
                                <td>
                                    <input type="password" class="form-control" v-model="editUser.password" placeholder="为空时密码不变">
                                </td>
                            </tr>

<!--                            <tr></tr>-->
<!--                            <tr>-->
<!--                                <td align="right">拥有角色:</td>-->
<!--                            </tr>-->
<!--                            <tr v-for="bean in roles">-->
<!--                                <td></td>-->
<!--                                <td>-->
<!--                                    <input type="checkbox" :id="bean.id" :value="bean.id" v-model="editRoles">-->
<!--                                    <label :for="bean.id">{{bean.rolename}}</label>-->
<!--                                </td>-->
<!--                            </tr>-->

                        </table>
                    </div>

                    <div class="modal-footer" style="text-align:center;">
                        <button class="btn btn-primary" @click="editUserFunction" type="button">修改</button>
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var urlIP = window.location.hostname;
        $(function () {
            var userManagerVue = {

                userMap:{user: {username: '', emailadd: ''},startDate:'',endDate:'',upStartDate:'',uEndDate:''},
                // page:{},
                users: [],
                pagination: {},

                addUser: {usercode: '', username: '', password: '', emailadd: ''},
                editUser: {},

                roles:[],
                addRoles:[],
                editRoles:[],
            };
            var vue = new Vue({
                el: '#userManagerDiv',
                data: userManagerVue,
                mounted: function () {
                    this.init();
                    this.$nextTick(function () {
                        this.queryUser(1);
                    });
                },
                methods: {
                    init:function(){
                        // var url = "http://" + urlIP + ":8031/api-user/getRoles";
                        // axios.get(url).then(function (response) {
                        //     vue.roles = response.data;
                        // });
                    },
                    queryUser: function (start) {
                        if(undefined==vue.pagination.size)
                            vue.pagination.size=5;

                        var url = "/users/list/"+ vue.pagination.size + "/"  + start;
                        axios.post(url, vue.userMap).then(function (response) {
                            vue.pagination = response.data.pagination;
                            vue.users = vue.pagination.records;
                        });
                    },
                    addSysUser: function () {
                        if ('' == vue.addUser.username) {
                            alert("用户名称不允许为空");
                        } else if ('' == vue.addUser.password) {
                            alert("密码不允许为空");
                        } else if ('' == vue.addUser.emailadd) {
                            alert("邮箱不允许为空");
                        } else {
                            vue.addUser.userid=vue.addUser.usercode;
                            var url = "/users/add";
                            axios.post(url, vue.addUser).then(function (response) {
                                var result = response.data;
                                if(result.code==0){
                                    vue.addRoleFunction(result.user.id);
                                    vue.ChangePageSize();
                                }else{
                                    alert(result.msg);
                                }
                            });
                        }
                    },
                    addRoleFunction:function(userId){
                        console.log("user:"+userId);
                        // 添加岗位，新增用户后执行
                        // var url2 = "/users/role/"+userId;
                        // axios.post(url2,vue.addRoles ).then(function (response2) {
                        //     vue.addRole=[];
                        //
                        //     if('1'==response2.data){
                        //         alert(response.data.content);
                                $("#addUserMod").modal('hide');
                                vue.ChangePageSize()
                                vue.addUser = {usercode: '', username: '', password: '', emailadd: ''};
                        //     }
                        // });
                    },
                    editUserMod: function (id) {
                        var url = "/users/get/" + id;
                        axios.get(url).then(function (response) {
                            var result = response.data;
                            if (result.code==0) {
                                vue.editUser = result.user;
                                $("#editUserMod").modal('show');

                                //获取用户角色
                                // var url2 = "http://" + urlIP + ":8031/api-user/getRoleByUserId/" + vue.editUser.id;
                                // axios.get(url2).then(function (response) {
                                //     vue.editRoles=response.data;
                                // });

                            } else {
                                alert("数据获取失败，请重新查询后再进行修改处理！");
                            }
                        });
                    },
                    editUserFunction: function () {
                        var url = "/users/edit";
                        axios.post(url, vue.editUser).then(function (response) {
                            var result = response.data;
                            if(result.code==0){
                                // this.editRoleFunction(vue.editUser.id);
                                vue.editUser={};
                                $("#editUserMod").modal('hide');
                                alert("修改成功！");
                                vue.ChangePageSize();
                            }else {
                                alert(response.data.content);
                            }
                        });
                    },
                    editRoleFunction:function(id){
                        // 修改岗位，修改用户后执行
                        // var url2 = "http://" + urlIP + ":8031/api-user/editUserRole/"+id;
                        // axios.post(url2,vue.editRoles ).then(function (response2) {
                        //     if("1"==response2.data){
                        //         alert(response.data.content);
                                $("#editUserMod").modal('hide');
                        //         vue.queryUser(vue.pagination.number);
                        //         vue.editUser = {};
                        //         vue.editRoles = [];
                        //     }
                        // });
                        alert("修改成功！");
                    },

                    ChangePageSize: function () {
                        vue.queryUser(vue.pagination.current);
                    },
                    jump: function(page){
                        if('first'== page)
                            vue.queryUser(1);
                        else if('pre'== page)
                            vue.queryUser(vue.pagination.current-1);
                        else if('next'== page)
                            vue.queryUser(vue.pagination.current+1);
                        else if('last'== page)
                            vue.queryUser(vue.pagination.pages);
                    },
                    jumpByNumber: function(start){
                        vue.queryUser(start);
                    },
                },
            });
        });
    </script>

</div>
